<template>
	<u-navbar :is-back="false" title="">
		<view class="slot-wrap">
			<view class="back-box" @click="back">
				<view class="icon">
					<u-icon name="arrow-left" color="#999999" size="30"></u-icon>
				</view>
				<view class="back">返回</view>
			</view>
			<view class="title-box">立即提现</view>
			<view class="more-box">提交信息</view>
		</view>
	</u-navbar>
	<view class="uploadings-file">
		<view class="money">
			<view class="money-contents">
				<view class="money-content-box">
					<view class="money-title">
						<text>所有收益</text>
					</view>
					<view class="use-money">
						<text>￥3,000</text>
						<button @click="surePaypal">
							<text>提现</text>
						</button>
					</view>
					<view class="today-money-list">
						<view class="rodat-title">
							<text>每月收益报表</text>
						</view>
					</view>
					<view class="today-money-desc-list">
						<view class="select-time-change-init" @click="todayShow = !todayShow">
							<image src="@/static/date.png" mode=""></image>
							<text>请选择时间</text>
						</view>
						<u-calendar v-model="todayShow" :mode="modeType" @change="timeDateChange"></u-calendar>
						<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
					</view>
					<view class="today-money-list">
						<view class="rodat-title">
							<text>总收益报表</text>
						</view>
					</view>
					<view class="today-money-desc-list">
						<view class="select-time-change-init" @click="todayShow = !todayShow">
							<image src="@/static/date.png" mode=""></image>
							<text>请选择时间</text>
						</view>
						<u-calendar v-model="todayShow" :mode="modeType" @change="timeDateChange"></u-calendar>
						<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const chartData = ref({})
	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			disabled: false,
			data: [
				{
					min: 0
				}
			]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	})

	const getServerData = () => {
		//模拟从服务器获取数据时的延时
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				series: [
					{
						name: "目标值",
						data: [35, 36, 31, 33, 13, 34]
					},
					{
						name: "完成量",
						data: [18, 27, 21, 24, 6, 28]
					}
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}

	getServerData()

	const surePaypal = () => {
		uni.navigateTo({
			url: '/pages/home/paypal'
		})
	}

	const todayShow = ref(false)
	const modeType = ref('date')
	const timeDateChange = () => {

	}
	const back = () => uni.navigateBack()
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;

		.title-box {
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 23.17px;
			color: rgba(0, 0, 0, 1);
		}

		.more-box {
			opacity: 0;
			/** 文本1 */
			font-size: 10px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 14.48px;
			color: rgba(0, 0, 0, 1);
			padding-right: 28rpx;
		}

		.back-box {
			display: flex;
			align-items: center;
			padding-left: 28rpx;

			.back {
				opacity: 1;
				/** 文本1 */
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 14.48px;
				color: rgba(0, 0, 0, 1);
			}
		}

		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */

	}

	.money {
		margin-top: 40rpx;

		.money-contents {
			margin: 0 30rpx;

			.money-content-box {
				.money-title {
					text {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.use-money {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 46rpx;

					text {
						font-size: 60rpx;
						color: #FF5733;
						font-weight: bold;
					}

					button {
						width: 160rpx;
						height: 62rpx;
						background: #FF5733;
						margin: 0;
						padding: 0;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							font-size: 28rpx;
							color: white;
							font-weight: 400;
						}

						&::after {
							display: none;
						}
					}
				}

				.today-money-list {
					margin-top: 60rpx;

					.rodat-title {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {}
					}
				}

				.today-money-desc-list {
					margin-top: 10rpx;
					background: rgba(250, 250, 250, 0.1);
					border-radius: 20rpx;

					.today-money-lists {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #fafafa;
						margin-bottom: 30rpx;
						padding-bottom: 10rpx;

						text {
							font-size: 26rpx;
							color: #666;
						}

						&:nth-last-child(1) {
							border: none;
						}
					}
				}
			}
		}
	}

	.select-time-change-init {
		display: flex;
		align-items: center;
		margin: 20rpx 0;

		image {
			margin-right: 10rpx;
			width: 40rpx;
			height: 40rpx;
		}

		text {
			font-size: 28rpx;
		}
	}
</style>